<template>
  <view class="cont">
    <view class="charttitle">血压</view>
    <view class="chartBox">
      <chart-one
        :x-data="echartOneData.timeData"
        :high-data="echartOneData.highData"
        :low-data="echartOneData.lowData"
        :reduce-data="echartOneData.reduceData"
      ></chart-one>
    </view>

    <view class="charttitle">柱状图+垂直x轴竖线</view>
    <view class="chartBox">
      <chart-two
        :NORMALTIT="echartTwoData.pers"
        :x-data="echartTwoData.X"
        :y-data="echartTwoData.Y_LEFT"
        :line-data="echartTwoData.Y_RIGHT"
        :vertical-x="echartTwoData.verticalX"
      ></chart-two>
    </view>

    <view class="charttitle">区域图</view>
    <view class="chartBox">
      <chart-three
        :x-data="echartThreeData.timeData"
        :y-data="echartThreeData.highData"
        :min-value="echartThreeData.minValue"
        :mid-value="echartThreeData.midValue"
        :max-value="echartThreeData.maxValue"
      ></chart-three>
    </view>

    <view class="charttitle">柱状图顶部连线</view>
    <view class="chartBox">
      <chart-four
        :name="echartFourData.name"
        :x-data="echartFourData.x"
        :value="echartFourData.value"
      ></chart-four>
    </view>

    <view style="background: #000">
      <chart-five
        title="这是标题"
        TitleSize="30rpx"
        footerTitle="%"
        :footerTitleAlign="right"
        v-model="echartFiveData.diabete"
        :max="100"
        :value="echartFiveData.diabete"
        :color="isColor(echartFiveData.diabete)"
      ></chart-five>
    </view>

    <view class="chartSix">
      <chart-six
        TitleSize="30rpx"
        :max="100"
        :tit="echartSixData.name1"
        :value="echartSixData.value1"
        :color="echartSixData.color1"
      ></chart-six>
       <chart-six
        TitleSize="30rpx"
        :max="100"
        :tit="echartSixData.name2"
        :value="echartSixData.value2"
        :color="echartSixData.color2"
      ></chart-six>
       <chart-six
        TitleSize="30rpx"
        :max="100"
        :tit="echartSixData.name3"
        :value="echartSixData.value3"
        :color="echartSixData.color3"
      ></chart-six>
    </view>

    <view>
      <chart-seven :max-val="1000"></chart-seven>
    </view>
  </view>
</template>

<script>
import chartOne from "../../components/echart/chartOne.vue";
import chartTwo from "../../components/echart/chartTwo.vue";
import chartThree from "../../components/echart/chartThree.vue";
import chartFour from "../../components/echart/chartFour.vue";
import chartFive from "../../components/echart/chartFive.vue";
import chartSix from "../../components/echart/chartSix.vue";
import chartSeven from "../../components/echart/chartSeven.vue";
export default {
  name: "OneChart",
  components: {
    chartOne,
    chartTwo,
    chartThree,
    chartFour,
    chartFive,
    chartSix,
    chartSeven
  },
  data() {
    return {
      echartOneData: {
        timeData: ["2020-01", "2021-01", "2022-01"], // x轴数据
        highData: [132, 110, 150], // 最大值
        lowData: [92, 75, 80], // 最小值
        reduceData: [40, 35, 70], // 最大值-最小值
      },
      echartTwoData: {
        X: [
          "2123",
          "2426",
          "2729",
          "3032",
          "3335",
          "3638",
          "3941",
          "4244",
          "4547",
          "4850",
          "5153",
          "5456",
          "5759",
          "6062",
          "6365",
          "6668",
          "6971",
          "7274",
          "7577",
          "7880",
          "8183",
          "8486",
          "8789",
          "9092",
          "9395",
          "9698",
          "99101",
          "102104",
          "105107",
          "108110",
        ], // x轴坐标
        Y_LEFT: [
          "4887",
          "7917",
          "11443",
          "18018",
          "22127",
          "30426",
          "44478",
          "60026",
          "79042",
          "93882",
          "93026",
          "91256",
          "86318",
          "112037",
          "114467",
          "106318",
          "100302",
          "88695",
          "74493",
          "58334",
          "40186",
          "25660",
          "13352",
          "5750",
          "1778",
          "436",
          "86",
          "18",
          "48",
          "49",
        ], // y轴-左
        Y_RIGHT: [
          "0.002204014",
          "0.003842309",
          "0.006398578",
          "0.010178597",
          "0.015466987",
          "0.022451073",
          "0.031130215",
          "0.041232622",
          "0.052169137",
          "0.063052211",
          "0.07279491",
          "0.080281556",
          "0.084575519",
          "0.085111391",
          "0.081817242",
          "0.07513047",
          "0.065902435",
          "0.055220568",
          "0.044199184",
          "0.033794151",
          "0.024682131",
          "0.017220171",
          "0.011476404",
          "0.007306134",
          "0.004443067",
          "0.002581018",
          "0.001432228",
          "0.000759183",
          "0.000384411",
          "0.00018593",
        ], // y轴-右
        pers: "4.43", // 百分比
        verticalX: 5, // 垂直x轴的竖线位置
      },
      echartThreeData: {
        timeData: ["2020-01", "2021-01", "2022-01"], // x轴数据
        highData: [7.55, 5.48, 10.38], // 柱状图数值
        maxValue: "9.53", // 最大值
        midValue: "6.49", // 中间值
        minValue: "5.9", // 最小值
      },
      echartFourData: {
        name: ["健康", "患病"],
        x: ["2020", "2021", "2022"],
        value: [
          [0.46, 0.9, 1.3],
          [0.98, 1.9, 0.6],
        ],
      },
      right: 'right',
      echartFiveData: {
        diabete: "20",
      },
      echartSixData: {
        value1: '20',
        name1: '文字1',
        color1: "#CF2929",
        value2: '10',
        name2: '文字2',
        color2: "#CF2929",
        value3: '40',
        name3: '文字3',
        color3: "#CF2929"
      }
    };
  },
  methods: {
    isColor(num) {
      if (num == 0) {
        return "#FFFFFF";
      } else if (num >0 && num <= 40) {
        return "#00B1F4";
      } else if (num > 40 && num <= 80) {
        return "#FFAC0B";
      } else {
        return "#FF2625";
      }
    },
  },
};
</script>

<style scoped>
.cont {
  padding: 0 20rpx 100rpx;
}
.charttitle {
  font-size: 26rpx;
  color: #333333;
  padding: 32rpx 0;
}
.chartBox {
  width: 100%;
  height: 400rpx;
}
.chartSix {
  display: flex;
  justify-content: space-between;
}
</style>
